<template>
  <div>
    <div  style="height: 50px">
      <form>
        <div style="float: left;margin-left: 20px">
          关键字搜索:
          <el-input style="width: auto"   v-model="keyWords"  size="small" placeholder="请输入内容"></el-input>
        </div>
        <div>
          <el-button icon="el-icon-search" circle style="margin-left: 8px" @click="search()"></el-button>
        </div>
      </form>
    </div>
    <hr>

    <div>
      <el-button type="primary" plain style="float: right;margin-left: 30px" size="small" v-on:click="goAddArticle()">添加</el-button>
      <el-button type="primary" plain size="small"  style="float:right " v-on:click="goMyArticle()">管理我的</el-button>
    </div>

    <div>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            label="文章标题"
            prop="title">
        </el-table-column>
        <el-table-column
            label="发布人"
            prop="aName">
        </el-table-column>
        <el-table-column
            label="发布时间"
            prop="publishData">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="查看详情"
            width="200">
          <template slot-scope="scope">
            <el-button @click="viewById(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>


    </div>
  </div>
</template>
<script>

import axios from 'axios'
export default {
  name: "ArticleList",
  data(){
    return{
      keyWords:'',
      account:'',
      tableData: null
    }
  },
  created(){
    this.account =sessionStorage.getItem('sno')
    var _this = this
    // axios.get('http://localhost:8080/jas/sport/article/getMyArticle/'+_this.account).then(function (resp) {
    axios.get('http://localhost:8080/jas/sport/article/getAllArticle').then(function (resp) {
      console.log(resp.data)
      _this.tableData = resp.data
    })
  },

  methods: {
    search() {
      if (this.keyWords!=''){
        var _this = this
        _this.keyWords = encodeURI(this.keyWords)
        axios.get('http://localhost:8080/jas/sport/article/searchByTitle/'+_this.keyWords).then(function (resp) {
          const article = resp.data
          if (article.length > 0){
            _this.tableData = resp.data
            // _this.$router.push({name:'ArticleList',params:{resourceName:_this.noticeTitle}})
          }
          else {
            alert("没有符合条件的查询")
          }

        })
      } else {
        location.reload();

        // alert('请输入查询条件')
      }
    },
    goAddArticle(){
      this.$router.push('/StudentMainPage/ArticleListMain')
    },
    goMyArticle(){
      this.$router.push('/StudentMainPage/MyArticle')
    },


    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(val)
    },
    //table中的
    // mypage (currentpage) {
    //   const _this = this
    //   axios.get('http://localhost:8080/jas/sport/article/getAllArticle').then(function (resp) {
    //     _this.tableData = resp.data
    //   })
    // },
    viewById(row){
      this.$router.push(
        {
         name:'ViewArticleDetail',
         params:{
           aId:row.aId,           //文章id
           title:row.title,       //文章题目
           content:row.aContent,  //文章内容
           pubulisher:row.aName,  //发布人名字
           time:row.publishData,  //日期
      }})
    },

  }
}
</script>



<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>